<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Unicorn Admin</title>
		<meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/font-awesome.css" />
		<link rel="stylesheet" href="css/unicorn.css" />
		<!--[if lt IE 9]>
		<script type="text/javascript" src="js/respond.min.js"></script>
		<![endif]-->
			
	<script>
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

		  ga('create', 'UA-44987299-1', 'bootstrap-hunter.com');
		  ga('send', 'pageview');

		</script></head>	<body data-color="grey" class="flat"><div id="wrapper">
		<div id="header">
			<h1><a href="./index.html">Unicorn Admin</a></h1>	
			<a id="menu-trigger" href="#"><i class="fa fa-bars"></i></a>	
		</div>
		
		<div id="user-nav">
            <ul class="btn-group">
                <li class="btn" ><a title="" href="#"><i class="fa fa-user"></i> <span class="text">Profile</span></a></li>
                <li class="btn dropdown" id="menu-messages"><a href="#" data-toggle="dropdown" data-target="#menu-messages" class="dropdown-toggle"><i class="fa fa-envelope"></i> <span class="text">Messages</span> <span class="label label-danger">5</span> <b class="caret"></b></a>
                    <ul class="dropdown-menu messages-menu">
                        <li class="title"><i class="fa fa-envelope-alt"></i>Messages<a class="title-btn" href="#" title="Write new message"><i class="fa fa-share"></i></a></li>
                        <li class="message-item">
                        	<a href="#">
	                            <img alt="User Icon" src="img/demo/av1.jpg" />
	                            <div class="message-content">
	                            	<span class="message-time">
		                                3 mins ago
		                            </span>
	                                <span class="message-sender">
	                                    Nunc Cenenatis
	                                </span>
	                                <span class="message">
	                                    Hi, can you meet me at the office tomorrow morning?
	                                </span>
	                            </div>
                        	</a>
                        </li>
                        <li class="message-item">
							<a href="#">
	                            <img alt="User Icon" src="img/demo/av1.jpg" />
	                            <div class="message-content">
	                            	<span class="message-time">
		                                3 mins ago
		                            </span>
	                                <span class="message-sender">
	                                    Nunc Cenenatis
	                                </span>
	                                <span class="message">
	                                    Hi, can you meet me at the office tomorrow morning?
	                                </span>
	                            </div>
                        	</a>
                        </li>
                        <li class="message-item">
							<a href="#">
	                            <img alt="User Icon" src="img/demo/av1.jpg" />
	                            <div class="message-content">
	                            	<span class="message-time">
		                                3 mins ago
		                            </span>
	                                <span class="message-sender">
	                                    Nunc Cenenatis
	                                </span>
	                                <span class="message">
	                                    Hi, can you meet me at the office tomorrow morning?
	                                </span>
	                            </div>
                        	</a>
                        </li>
                    </ul>
                </li>
                <li class="btn"><a title="" href="#"><i class="fa fa-cog"></i> <span class="text">Settings</span></a></li>
                <li class="btn"><a title="" href="login.html"><i class="fa fa-share"></i> <span class="text">Logout</span></a></li>
            </ul>
        </div>
       
       <div id="switcher">
            <div id="switcher-inner">
                <h3>Theme Options</h3>
                <h4>Colors</h4>
                <p id="color-style">
                    <a data-color="orange" title="Orange" class="button-square orange-switcher" href="#"></a>
                    <a data-color="turquoise" title="Turquoise" class="button-square turquoise-switcher" href="#"></a>
                    <a data-color="blue" title="Blue" class="button-square blue-switcher" href="#"></a>
                    <a data-color="green" title="Green" class="button-square green-switcher" href="#"></a>
                    <a data-color="red" title="Red" class="button-square red-switcher" href="#"></a>
                    <a data-color="purple" title="Purple" class="button-square purple-switcher" href="#"></a>
                    <a href="#" data-color="grey" title="Grey" class="button-square grey-switcher"></a>
                </p>
                <!--
                <h4>Background Patterns</h4>
                <h5>for boxed version</h5>
                <p id="pattern-switch">
                    <a data-pattern="pattern1" style="background-image:url('assets/img/patterns/pattern1.png');" class="button-square" href="#"></a>
                    <a data-pattern="pattern2" style="background-image:url('assets/img/patterns/pattern2.png');" class="button-square" href="#"></a>
                    <a data-pattern="pattern3" style="background-image:url('assets/img/patterns/pattern3.png');" class="button-square" href="#"></a>
                    <a data-pattern="pattern4" style="background-image:url('assets/img/patterns/pattern4.png');" class="button-square" href="#"></a>
                    <a data-pattern="pattern5" style="background-image:url('assets/img/patterns/pattern5.png');" class="button-square" href="#"></a>
                    <a data-pattern="pattern6" style="background-image:url('assets/img/patterns/pattern6.png');" class="button-square" href="#"></a>
                    <a data-pattern="pattern7" style="background-image:url('assets/img/patterns/pattern7.png');" class="button-square" href="#"></a>
                    <a data-pattern="pattern8" style="background-image:url('assets/img/patterns/pattern8.png');" class="button-square" href="#"></a>
                </p>-->
                <h4 class="visible-lg">Layout Type</h4>
                <p id="layout-type">
                	<a data-option="flat" class="button" href="#">Flat</a>
                    <a data-option="old" class="button" href="#">Old</a>                    
                </p>
            </div>
            <div id="switcher-button">
                <i class="fa fa-cogs"></i>
            </div>
        </div>
            
		<div id="sidebar">
			<div id="search">
				<input type="text" placeholder="Search here..."/><button type="submit" class="tip-right" title="Search"><i class="fa fa-search"></i></button>
			</div>
			<ul>
				<li><a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
				<li class="submenu">
					<a href="#"><i class="fa fa-flask"></i> <span>UI Lab</span> <i class="arrow fa fa-chevron-right"></i></a>
					<ul>
						<li><a href="interface.html">Interface Elements</a></li>
						<li><a href="jquery-ui.html">jQuery UI</a></li>
						<li><a href="buttons.html">Buttons &amp; icons</a></li>
					</ul>
				</li>
				<li class="submenu">
					<a href="#"><i class="fa fa-th-list"></i> <span>Form elements</span> <i class="arrow fa fa-chevron-right"></i></a>
					<ul>
						<li><a href="form-common.html">Common elements</a></li>
						<li><a href="form-validation.html">Validation</a></li>
						<li><a href="form-wizard.html">Wizard</a></li>
					</ul>
				</li>
				<li><a href="tables.html"><i class="fa fa-th"></i> <span>Tables</span></a></li>
				<li><a href="grid.html"><i class="fa fa-th-list"></i> <span>Grid Layout</span></a></li>
				<li class="active submenu open">
					<a href="#"><i class="fa fa-file"></i> <span>Sample pages</span> <i class="arrow fa fa-chevron-right"></i></a>
					<ul>
						<li><a href="invoice.html">Invoice</a></li>
						<li><a href="chat.html">Support chat</a></li>
						<li><a href="calendar.html">Calendar</a></li>
						<li><a href="gallery.html">Gallery</a></li>
						<li class="active"><a href="messages.html">Messages</a></li>
					</ul>
				</li>
				<li>
					<a href="charts.html"><i class="fa fa-signal"></i> <span>Charts &amp; graphs</span></a>
				</li>
				<li>
					<a href="widgets.html"><i class="fa fa-inbox"></i> <span>Widgets</span></a>
				</li>
			</ul>
		
		</div>
		
		
		
		<div id="content">
			<div id="content-header">
				<h1>Messages</h1>
				<div class="btn-group colored">
					<a class="btn btn-inverse" data-toggle="modal" href="#new-mail"><i class="fa fa-envelope"></i> Compose New</a>
				</div>
				<div class="modal fade mail-new-message" id="new-mail" role="modal">
					<div class="modal-dialog">
					    <div class="modal-content">
					    	<div class="modal-header">
					        	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					        	<h4 class="modal-title">New message</h4>
					    	</div>
					    	<div class="modal-body nopadding">
					        	<form action="#">
									<div class="new-message-to">
										To: <input type="text" name="message-to" />
									</div>
									<div class="new-message-subject">
										Subject: <input type="text" name="message-subject" />
									</div>
									<div class="new-message-content">
										<textarea name="message-content"></textarea>
									</div>
					        	</form>
					    	</div>
					    	<div class="modal-footer">
					        	<button type="button" class="btn btn-danger" data-dismiss="modal">Discard</button>
					        	<button type="button" class="btn btn-success" data-dismiss="modal">Save as draft</button> &nbsp; &nbsp; 
					        	<button type="button" class="btn btn-primary" data-dismiss="modal">Send</button>
					      	</div>
					    </div><!-- /.modal-content -->
					</div><!-- /.modal-dialog -->
				</div>
			</div>
			<div id="breadcrumb">
				<a href="#" title="Go to Home" class="tip-bottom"><i class="fa fa-home"></i> Home</a>
				<a href="#">Sample Pages</a>
				<a href="#" class="current">Messages</a>
			</div>				
				<div class="row">
					<div class="col-xs-12">
						<div class="widget-box widget-messages">
							<div class="widget-title">
								<span class="icon">
									<i class="fa fa-envelope-alt"></i>
								</span>
								<h5>Messages</h5>
								<div class="buttons">
									<a class="btn go-full-screen"><i class="fa fa-resize-full"></i></a>
								</div>
								<ul class="nav nav-tabs pull-right">
									<li class="active"><a href="#inbox-tab" data-toggle="tab"><i class="fa fa-inbox"></i><span class="text"> Inbox</span></a></li>
									<li><a href="#sent-tab" data-toggle="tab"><i class="fa fa-location-arrow"></i><span class="text"> Sent</span></a></li>
									<li><a href="#messages" data-toggle="tab"><i class="fa fa-pencil"></i><span class="text"> Draft</span></a></li>
									<li><a href="#settings" data-toggle="tab"><i class="fa fa-trash-o"></i><span class="text"> Trash</span></a></li>
								</ul>
							</div>
							<div class="widget-content nopadding">
								<div class="tab-content">
									<div id="inbox-tab" class="tab-pane active checklist">
										<ul class="messages-list">
											<li class="messages-item">
													<span class="messages-item-star" title="Mark as starred"><i class="fa fa-star"></i></span>
													<img class="messages-item-avatar" src="img/demo/av1.jpg" />
													<span class="messages-item-from">John Doe</span>
													<div class="messages-item-time"><span class="text">10:23 PM</span>
														<div class="messages-item-actions">
															<a href="#" title="Reply" data-toggle="dropdown"><i class="fa fa-mail-reply"></i></a>
															<div class="dropdown">
																<a href="#" title="Move to folder" data-toggle="dropdown"><i class="fa fa-folder-open"></i></a>
																<ul class="dropdown-menu pull-right">
																	<li><a href="#">Work</a></li>
																	<li><a href="#">Partners</a></li>
																	<li><a href="#">Family</a></li>
																</ul>
															</div>
															<div class="dropdown">
																<a href="#" title="Attach to tag" data-toggle="dropdown"><i class="fa fa-tag"></i></a>
																<ul class="dropdown-menu pull-right">
																	<li><a href="#"><i class="tag-icon" style="background-color: green;"></i>Friends</a></li>
																	<li><a href="#"><i class="tag-icon" style="background-color: red;"></i>Important</a></li>
																	<li><a href="#"><i class="tag-icon" style="background-color: blue;"></i>Socials</a></li>
																</ul>
															</div>
														</div>
													</div>
													<span class="messages-item-subject">Astra anea en bumanso ...</span>
													<span class="messages-item-preview">Lorem ipsum dolor sit amet, consec tetur adipisicing elit, sed do antera ...</span>
												
											</li>
											<li class="messages-item active starred">
												
													<span class="messages-item-star" title="Remove star"><i class="fa fa-star"></i></span>
													<img class="messages-item-avatar" src="img/demo/av2.jpg" />
													<span class="messages-item-from">John Doe</span>
													<div class="messages-item-time"><span class="text">08:46 PM</span>
														<div class="messages-item-actions">
															<a href="#" title="Reply" data-toggle="dropdown"><i class="fa fa-mail-reply"></i></a>
															<div class="dropdown">
																<a href="#" title="Move to folder" data-toggle="dropdown"><i class="fa fa-folder-open"></i></a>
																<ul class="dropdown-menu pull-right">
																	<li><a href="#">Work</a></li>
																	<li><a href="#">Partners</a></li>
																	<li><a href="#">Family</a></li>
																</ul>
															</div>
															<div class="dropdown">
																<a href="#" title="Attach to tag" data-toggle="dropdown"><i class="fa fa-tag"></i></a>
																<ul class="dropdown-menu pull-right">
																	<li><a href="#"><i class="tag-icon" style="background-color: green;"></i>Friends</a></li>
																	<li><a href="#"><i class="tag-icon" style="background-color: red;"></i>Important</a></li>
																	<li><a href="#"><i class="tag-icon" style="background-color: blue;"></i>Socials</a></li>
																</ul>
															</div>
														</div>
													</div>
													<span class="messages-item-subject">Astra anea en bumanso ...</span>
													<span class="messages-item-preview">Lorem ipsum dolor sit amet, consec tetur adipisicing elit, sed do antera ...</span>
												
											</li>
											<li class="messages-item">
												
													<span class="messages-item-star" title="Mark as starred"><i class="fa fa-star"></i></span>
													<span class="messages-item-attachment"><i class="fa fa-paperclip"></i></span>
													<img class="messages-item-avatar" src="img/demo/av3.jpg" />
													<span class="messages-item-from">John Doe</span>
													<div class="messages-item-time"><span class="text">04:03 PM</span>
														<div class="messages-item-actions">
															<a href="#" title="Reply" data-toggle="dropdown"><i class="fa fa-mail-reply"></i></a>
															<div class="dropdown">
																<a href="#" title="Move to folder" data-toggle="dropdown"><i class="fa fa-folder-open"></i></a>
																<ul class="dropdown-menu pull-right">
																	<li><a href="#">Work</a></li>
																	<li><a href="#">Partners</a></li>
																	<li><a href="#">Family</a></li>
																</ul>
															</div>
															<div class="dropdown">
																<a href="#" title="Attach to tag" data-toggle="dropdown"><i class="fa fa-tag"></i></a>
																<ul class="dropdown-menu pull-right">
																	<li><a href="#"><i class="tag-icon" style="background-color: green;"></i>Friends</a></li>
																	<li><a href="#"><i class="tag-icon" style="background-color: red;"></i>Important</a></li>
																	<li><a href="#"><i class="tag-icon" style="background-color: blue;"></i>Socials</a></li>
																</ul>
															</div>
														</div>
													</div>
													<span class="messages-item-subject">Astra anea en bumanso ...</span>
													<span class="messages-item-preview">Lorem ipsum dolor sit amet, consec tetur adipisicing elit, sed do antera ...</span>
												
											</li>
											<li class="messages-item">
												
													<span class="messages-item-star" title="Mark as starred"><i class="fa fa-star"></i></span>
													<img class="messages-item-avatar" src="img/demo/av1_1.jpg" />
													<span class="messages-item-from">John Doe</span>
													<div class="messages-item-time"><span class="text">11:16 AM</span>
														<div class="messages-item-actions">
															<a href="#" title="Reply" data-toggle="dropdown"><i class="fa fa-mail-reply"></i></a>
															<div class="dropdown">
																<a href="#" title="Move to folder" data-toggle="dropdown"><i class="fa fa-folder-open"></i></a>
																<ul class="dropdown-menu pull-right">
																	<li><a href="#">Work</a></li>
																	<li><a href="#">Partners</a></li>
																	<li><a href="#">Family</a></li>
																</ul>
															</div>
															<div class="dropdown">
																<a href="#" title="Attach to tag" data-toggle="dropdown"><i class="fa fa-tag"></i></a>
																<ul class="dropdown-menu pull-right">
																	<li><a href="#"><i class="tag-icon" style="background-color: green;"></i>Friends</a></li>
																	<li><a href="#"><i class="tag-icon" style="background-color: red;"></i>Important</a></li>
																	<li><a href="#"><i class="tag-icon" style="background-color: blue;"></i>Socials</a></li>
																</ul>
															</div>
														</div>
													</div>
													<span class="messages-item-subject">Astra anea en bumanso ...</span>
													<span class="messages-item-preview">Lorem ipsum dolor sit amet, consec tetur adipisicing elit, sed do antera ...</span>												</a>
											</li>
										</ul>
										<div class="messages-content">
											<div class="message-header">
												<div class="message-from">John Doe &lt;john-doe@domain.com&gt;</div>
												<div class="message-to">To: George Coockeny</div>
												<div class="message-subject">Bootstrap 3.0 is finally here!</div>
												<div class="message-time">8 Sep 2013, 08:46 PM</div>
												<div class="message-actions">
													<a href="#" title="Move to trash"><i class="fa fa-trash-o"></i></a>
													<a href="#" title="Reply"><i class="fa fa-reply"></i></a>
													<a href="#" title="Reply to all"><i class="fa fa-reply-all"></i></a>
													<a href="#" title="Forward"><i class="fa fa-long-arrow-right"></i></a>
												</div>
											</div>
											<div class="message-content">
												<p>
													Hi George!
												</p>
												<p>
													Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut blandit ligula. In accumsan mauris at augue feugiat consequat. Aenean consequat sem sed velit sagittis dignissim. Phasellus quis convallis est. Praesent porttitor mauris nec lectus mollis, eget sodales libero venenatis. Cras eget vestibulum turpis. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam turpis velit, tempor vitae libero ac, fermentum laoreet dolor.
												</p>
												<p>
													Phasellus sodales metus at pulvinar facilisis. Aliquam et orci condimentum, ultrices erat in, ornare mi. Etiam vel nulla eu enim sagittis imperdiet. Donec justo arcu, iaculis eu ante ac, consequat vulputate nisl. Aenean sed consectetur tortor. Quisque tempus enim id velit ultricies, ac egestas leo vestibulum. Donec pulvinar viverra venenatis. Mauris eu dui enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus malesuada commodo odio, in hendrerit mi tincidunt nec.
												</p>
												<p>
													Cras sed leo in neque iaculis iaculis vel vel sem. Praesent sed urna viverra odio molestie consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis quis consectetur arcu, quis tempus ipsum. Fusce eleifend arcu nunc, non porta ipsum imperdiet faucibus. Vivamus dictum, massa tincidunt blandit faucibus, tortor libero rhoncus nunc, id faucibus est leo non odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque at elit sed quam pretium bibendum vel eget sem. Fusce sed ante nec eros placerat vulputate sed eget nulla. Sed in dictum justo, ut ullamcorper est. Proin semper tellus orci, eu accumsan neque ultrices at. Fusce a vulputate risus. Maecenas id hendrerit metus, ornare sodales dolor. Pellentesque tempus, justo quis faucibus commodo, magna mauris tempus velit, vitae egestas leo orci in sapien. Maecenas egestas erat augue, sit amet convallis lacus tristique eu. Donec gravida dui dictum libero eleifend dapibus. 
												</p>	
												<p>
													Regards,<br />
													John Doe
												</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
		</div>
		<div class="row">
			<div id="footer" class="col-xs-12">
				2012 - 2013 &copy; Unicorn Admin. Brought to you by <a href="https://wrapbootstrap.com/user/diablo9983">diablo9983</a>
			</div>
		</div>
		<div class="white-backdrop"></div>
            
            <script src="js/jquery.min.js"></script>
            <script src="js/jquery-ui.custom.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <script src="js/wysihtml5.js"></script>
            <script src="js/bootstrap-wysihtml5.js"></script>
            
            <script src="js/jquery.nicescroll.min.js"></script>
            <script src="js/unicorn.js"></script>
            <script type="text/javascript">
            	$(function(){
            		$('.new-message-content textarea').wysihtml5();

            		$('.messages-item-star').on('click',function(){
            			par = $(this).parents('li');
            			if(par.hasClass('starred')) {
            				par.removeClass('starred');
            				$(this).attr('title','Mark as starred');
            			} else {
            				par.addClass('starred');
            				$(this).attr('title','Remove star');
            			}
            		});
            	});
            </script>
	</body>
</html>
